<template>
  <!-- 我的挂号 -->
  <div class="wode">
    <van-nav-bar
  title="标题"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
    <div v-if="items">
      <div v-for="(item, index) in uniqueArr" :key="index">
        <van-card :title="item.name1" :thumb="item.doctorimage">
        <template #tags>
          <van-tag
            plain
            type="primary"
            >{{ item.keshi }}</van-tag
          >
        </template>
        <template #title>
          <p style="font-size: large; float: left; width: 1.2rem">
            {{ item.name1 }}
          </p>
          <p style="font-size: medium">{{ item.doctorstate }}</p>
        </template>
        <template #desc
          ><p style="float: right; margin-top: -0.4rem; color: dimgrey;">
            <span :class="{
    aa: item.yqx === '已挂号'
    // 可以继续添加其他条件和对应的类名设置
}">{{ item.yqx }}</span>
          </p></template
        >
        <template #bottom>
          <p style="margin-top: 0">患者姓名：{{ item.name2 }}</p>
          <p style="margin-top: -0.2rem">就诊时间：{{ item.data }}</p>
          <p style="margin-top: -0.3rem">预约费用：{{ item.feiy }}</p>
        </template>
        <template #footer>
          <van-button size="mini">查看详情</van-button>
          <van-button size="mini">再次预约</van-button>
        </template>
      </van-card>
      </div>
    </div>
    <div v-else>
      <van-empty description="您还没有挂号记录" />
    </div>
  </div>
</template>

<script setup lang="ts">

import { useRouter } from 'vue-router';
const router = useRouter()

const onClickLeft = ()=>{
 // 跳转到首页
 window.location.href = '/xiao/yuyue';
}
const items = JSON.parse(localStorage.getItem('item') as string)
let uniqueArr = []
// 去重
if(items != null){
 uniqueArr = [...new Set(items.map(item => JSON.stringify(item)))].map(str => JSON.parse(str));
uniqueArr = uniqueArr.reduce((acc, current) => {
  let existing = acc.find(item => item.name1 === current.name1 )
  if (!existing) {
    acc.push(current);
  }
  return acc;
}, []);
}
</script>

<style>
.wode {
  width: 100vw;
  height: 100vh;
}
.aa{
  color: rgb(39, 183, 65);
  font-size: 0.3rem;
}
</style>
